<template>
  <view class="wrapper">
    <view class="form">
      <u--form
          labelPosition="left"
          :model="postForm"
          :rules="rules"
          ref="uForm"
          class="form"
          labelWidth="160rpx"
          labelAlign="right"
          :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
      >
        <u-form-item label="上传头像:">
          <u-upload
            :fileList="postForm.avatarList"
            width="160rpx"
            height="160rpx"
            :deletable="false"
            @afterRead="afterRead"
          ></u-upload>
        </u-form-item>
        <u-form-item label="昵称:" prop="nickname">
          <u--input
              v-model="postForm.nickname"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-button class="btn" color="#00A49C" @click="save" text="更新"></u-button>
      </u--form>
    </view>
  </view>
</template>

<script>
import config from '../../config/config'
import base64 from '../../util/base64'
import User from '../../api/user'
const userModel = new User()

export default {
  data() {
    return {
      postForm: {
        nickname: '',
        avatarList: []
      },
      rules: {
        nickname: {
          type: 'string',
          required: true,
          message: '请填昵称',
          trigger: ['blur', 'change']
        },
      }
    }
  },
  onLoad() {
    this.fetch()
  },
  methods: {
    fetch() {
      userModel.getAvatar().then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        if (data.avatar) {
          this.postForm.avatarList.push({
            url: +data.av === 0 ? data.avatar : config.baseUrl + data.avatar
          })
        }
        if (data.nickname) {
          this.postForm.nickname = data.nickname
        }
      })
    },
    save() {
      this.$refs.uForm.validate().then(res => {
        if (res) {
          userModel.setAvatar({ nickname: this.postForm.nickname }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '更新成功'
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            }, 500)
          })
        }
      }).catch(e => {

      })
    },
    afterRead(e) {
      const { file } = e
      const { url } = file
      const target = `${config.baseUrl}/h5/upload/avatar?max-width=750`
      const token = this.$store.getters['User/token']
      // console.log(target, token)
      uni.uploadFile({
        url: target,
        name: 'file',
        filePath: url,
        header: {
          // 'X-TOKEN-9q': token,
          [config.token_name]: token,
        },
        success: response => {
          uni.showToast({
            icon: 'none',
            title: '上传成功'
          })
          let { data } = response
          data = JSON.parse(data)
          const path = data.data.full_name
          const url = config.baseUrl + path
          // this.postForm.avatarList[0] = { url }
          const list = [{url}]
          this.$set(this.postForm, 'avatarList', list)
          // console.log(222, this.postForm.avatarList)
        }
      })
    }
  },
  watch: {
    // postForm: {
    //   deep: true,
    //   handler(v) {
    //     console.log(111, v.avatarList)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20rpx;
  background: $background_color;
  .form {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    .btn {
      margin-top: 20px;
    }
  }
}
</style>
